/**
 * @author zhangqiang
 * @date   17/7/18
 */
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Toast} from 'antd-mobile'
import {
	InputItem,
} from '../../components/home'

//通用组件
import {Title} from '../../components/common'



import '../../../styles/addInfo.scss';
import common from '../../utils/common'
import style from './index.scss'


class AddInfo extends Component {
	constructor(props) {
	super(props);
	this.state = {
	};
	}

	componentWillMount() {
	}



	toUrl(url) {
		this.context.router.push(url);
	}




	render() {
		return (
			<div className={style.addInfo}>
				<Title text='补充资料' isLine={true} />
				<InputItem type="text" index='2' itemText="车主姓名" maxLength="12" placeHolder="请输入车主姓名" id="name"
					value={this.state.name} showUnderLine={true} showTagText={true} creditCodeImg={this.state.nameImg} creditWidth={this.state.nameWidth}
					onClick={() => {
						this.setState({
							name: '',
							nameImg: 'hideDelete',
							nameNoBlur: false
						})
						document.querySelector('#name').focus()
					} }
					onBlur={(event) => {
						let res = event.target.value;
						this.setState({ nameNoBlur: true });
						setTimeout(() => {
							if (!this.state.nameNoBlur) return;  //点击删除按钮不执行验证
							let value = res,
								nameRule1 = /^[\u4e00-\u9fa5]{2,12}$/;

							if (value == '') {
								this.setState({
									nameImg: '',
								});
							} else if (nameRule1.test(value)) {
								this.setState({
									nameImg: 'correct',
									nameWidth: '.4rem'
								});
							} else {
								this.setState({
									nameWidth: '.4rem',
									nameImg: 'error'
								})
							}
						}, 0)
					} }
					onFocus={(e) => {
						window.scrollTo(0, 170);
						let value = e.target.value;
						if (value.length != 0 && value == this.state.name) {
							this.setState({
								nameImg: 'showDelete',
							});
						}
					} }

					onChange={(e) => {
						let value = e.target.value;
						if (value.length > 0 && value != ' ') {
							this.setState({
								nameImg: 'showDelete',
								name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
							});
						} else {
							this.setState({
								nameImg: 'hideDelete',
								name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
							});
						}
				} } />
				<InputItem type="text" index='2' itemText="身份证号" maxLength="18" placeHolder="请输入身份证号" id='cardId'
					value={this.state.cardId} showUnderLine={true} showTagText={true} creditCodeImg={this.state.cardIdImg} creditWidth={this.state.cardIdWidth}
					onClick={() => {
						this.setState({
							cardId: '',
							cardIdImg: 'hideDelete',
							cardIdNoBlur: false
						})
						document.querySelector('#cardId').focus()
					} }
					onBlur={(event) => {
						let res = event.target.value;
						this.setState({ cardIdNoBlur: true });
						setTimeout(() => {
							if (!this.state.cardIdNoBlur) return;  //点击删除按钮不执行验证
							let value = res,
								idCardRule1 = /^[0-9]{14}([0-9]|X|x)$/,
								idCardRule2 = /^[0-9]{17}([0-9]|X|x)$/;

							if (value == '') {
								this.setState({
									cardIdImg: '',
								});
							} else if (idCardRule1.test(value)) {
								this.setState({
									cardIdImg: 'correct',
									cardIdWidth: '.4rem'
								});
							} else if (idCardRule2.test(value)) {
								this.setState({
									cardIdImg: 'correct',
									cardIdWidth: '.4rem'
								});
							} else {
								this.setState({
									cardIdWidth: '.4rem',
									cardIdImg: 'error'
								})
							}
						}, 0)
					} }

					onFocus={(e) => {
						window.scrollTo(0, 150);
						//document.body.scrollTop = document.body.scrollHeight;
						let value = e.target.value;
						if (value.length != 0 && value == this.state.cardId) {
							this.setState({
								cardIdImg: 'showDelete',
							});
						}

					} }

					onChange={(e) => {
						let value = e.target.value;
						if (value.length > 0 && value != ' ') {
							this.setState({
								cardIdImg: 'showDelete',
								cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
							});
						} else {
							this.setState({
								cardIdImg: 'hideDelete',
								cardId: e.target.value.replace(/(^\s*)|(\s*$)/g, "").replace("x", 'X')
							});
						}
				} } />
				<InputItem type="text" index='2' itemText="手机号码" maxLength="11" placeHolder="请输入手机号码" id="phone"
					value={this.state.phone} showUnderLine={true} showTagText={true} creditCodeImg={this.state.phoneImg} creditWidth = {this.state.phoneWidth}
					onClick={()=>{
						this.setState({
							phone: '',
							phoneImg: 'hideDelete',
							phoneNoBlur: false
						})
						document.querySelector('#phone').focus();
					}}
					onBlur={(event)=>{
						let res = event.target.value;
						this.setState({phoneNoBlur: true});
						setTimeout(()=>{
							if(!this.state.phoneNoBlur) return;  //点击删除按钮不执行验证
							let value = res,
								phoneRule = /^0?1[3|4|5|7丨8][0-9]\d{8}$/;

							if(value == ''){
								this.setState({
									phoneImg: '',
								});
							}else if(phoneRule.test(value)){
								this.setState({
									phoneImg: 'correct',
									phoneWidth: '.4rem'
								});
							}else {
								this.setState({
									phoneWidth: '.4rem',
									phoneImg: 'error'
								})
							}
						},0)
					}}

					onFocus={(e)=>{
						let value = e.target.value;
						if(value.length!=0&&value==this.state.phone){
							this.setState({
								phoneImg: 'showDelete',
							});
						}
					}}

					onChange={(e) => {
						let value = e.target.value;
						if(value.length>0&&value!=' '){
							this.setState({
								phoneImg: 'showDelete',
								phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
							});
						}else {
							this.setState({
								phoneImg: 'hideDelete',
								phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
							});
						}
				}}/>
				<div className={style.code}>
					<InputItem type="text" index='2' itemText="验证码" maxLength="11" placeHolder="请输入验证码" id="code"
						value={this.state.code} showUnderLine={true} showTagText={true} creditCodeImg={this.state.phoneImg} creditWidth = {this.state.phoneWidth}
						onClick={()=>{
							this.setState({
								phone: '',
								phoneImg: 'hideDelete',
								phoneNoBlur: false
							})
							document.querySelector('#phone').focus();
						}}
						onBlur={(event)=>{
							let res = event.target.value;
							this.setState({phoneNoBlur: true});
							setTimeout(()=>{
								if(!this.state.phoneNoBlur) return;  //点击删除按钮不执行验证
								let value = res,
									phoneRule = /^0?1[3|4|5|7丨8][0-9]\d{8}$/;

								if(value == ''){
									this.setState({
										phoneImg: '',
									});
								}else if(phoneRule.test(value)){
									this.setState({
										phoneImg: 'correct',
										phoneWidth: '.4rem'
									});
								}else {
									this.setState({
										phoneWidth: '.4rem',
										phoneImg: 'error'
									})
								}
							},0)
						}}

						onFocus={(e)=>{
							let value = e.target.value;
							if(value.length!=0&&value==this.state.phone){
								this.setState({
									phoneImg: 'showDelete',
								});
							}
						}}

						onChange={(e) => {
							let value = e.target.value;
							if(value.length>0&&value!=' '){
								this.setState({
									phoneImg: 'showDelete',
									phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}else {
								this.setState({
									phoneImg: 'hideDelete',
									phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}
					}}/>
					<span className={style.verifyCode}>获取验证码</span>
				</div>
				{/* 上传图片-start- */}
				<div className={style.uploadImg+' border_bottom_1'}>
					<span>手持身份证照片</span>
					<div className={style.idCardExample}>
						<img src='./images/photoTemplate.png'></img>
					</div>
				</div>

				<div className={style.uploadImg}>
					<span>交强险报单副本</span>
					<div className={style.idCardExample}>
						<img src='./images/photoTemplate.png'></img>
					</div>
				</div>
				{/* 上传图片-end- */}
				<div style={{height: '.4rem',background: '#f2f2f2'}}></div>

				<div className={style.bt}>
					<button className={style.submit}>下一步</button>
				</div>
				{/* <button type='button' className={style.submit}>下一步</button> */}
				
			</div>	
		)
	}
}

//使用context
AddInfo.contextTypes = {
	router: React.PropTypes.object.isRequired
};

AddInfo.defaultProps = {};

export default connect()(AddInfo);
